
<template>
  <div class="videoDetailRoot">
    <div class="left">
      <div class="title">
        {{paramsType ==='mv'?'MV详情':"视频详情"}}
      </div>
      <video class="videoPlayer" :src="videoUrl" controls='controls' width="496" height="284" @play="playVideo" :poster="paramsType==='mv'? videoInfo.cover:videoInfo.coverUrl "></video>
      <video-Info v-if='Object.keys(videoInfo).length' :videoInfo='videoInfo' :paramsId='paramsId' :paramsType='paramsType' />
      <comment :hotComments='topComments' :comments='comments' commentType='musicList' />
    </div>
    <related-mv-list class="right" :relatedMvList='relatedMvList' @relatedMvClick='relatedMvClick' />
    <go-top scrollObj='.videoDetailRoot' />
  </div>
</template>

<script>
import { handleNum, handleMusicTime } from '@/plugins/utils'
import {
  reqMvDetail,
  reqMvUrl,
  reqRelatedMvList,
  reqMvComment,
  reqVideoDetail,
  reqVideoComment,
  reqVideoUrl
} from '@/network/api'
import { useRoute, useRouter } from 'vue-router'
import Comment from '@/components/comment/Comment.vue'
import GoTop from '@/components/goTop/GoTop.vue'
import { reactive, onMounted, toRefs, watch } from 'vue'
import RelatedMvList from './RelatedMvList.vue'
import VideoInfo from './VideoInfo.vue'
export default {
  name: 'videoDetail',
  components: { GoTop, RelatedMvList, VideoInfo, Comment },
  setup() {
    const data = reactive({
      videoInfo: {},
      videoUrl: '',
      relatedMvList: [],
      comments: [],
      topComments: [],
      comentsPage: 1
    })
    const route = useRoute()
    let paramsId = route.params.id
    let paramsType = route.params.type

    const router = useRouter()
    const playVideo = () => {
      store.commit('changePlayState', false)
    }

    const getRelatedMvList = async () => {
      const res = await reqRelatedMvList(paramsId)
      data.relatedMvList = res.data.map(v => {
        v.durationms = handleMusicTime(v.durationms)
        v.playTime = handleNum(v.playTime)
        return v
      })
    }
    const getMvDetail = async () => {
      const res = await reqMvDetail(paramsId)
      data.videoInfo = res.data
    }
    const getMvUrl = async () => {
      const res = await reqMvUrl(paramsId)
      if (res.code !== 200) {
        return
      }
      data.videoUrl = res.data.url
    }
    const getComment = async () => {
      const res = await reqMvComment(paramsId)
      if (res.code !== 200) {
        return
      }
      data.topComments = res.topComments
      data.comments = res.comments
    }

    const relatedMvClick = id => {
      router.push(`/videodetail/${id}/video`)
    }
    const getVideoDetail = async () => {
      const res = await reqVideoDetail(paramsId)
      data.videoInfo = res.data
    }
    const getVideoUrl = async () => {
      const res = await reqVideoUrl(paramsId)
      if (res.code !== 200) {
        return
      }
      data.videoUrl = res.urls[0].url
    }
    const getVideoComment = async () => {
      const res = await reqVideoComment(paramsId)
      if (res.code !== 200) {
        return
      }
      data.topComments = res.topComments
      data.comments = res.comments
    }
    watch(
      () => route.params.id,
      (current, last) => {
        if (current && current !== last) {
          console.log('6')
          paramsId = current
          paramsType = route.params.type
          getVideoDetail()
          getVideoUrl()
          getVideoComment()
          getRelatedMvList()
        }
      }
    )
    onMounted(() => {
      console.log(paramsId, '222')
      getRelatedMvList()
      if (paramsType === 'mv') {
        getMvDetail()
        getMvUrl()
        getComment()
      } else {
        getVideoDetail()
        getVideoUrl()
        getVideoComment()
      }
    })
    return { ...toRefs(data), paramsId, paramsType, playVideo, relatedMvClick }
  }
}
</script>

<style scoped>
.videoDetailRoot {
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  width: 1000px;
  height: 100%;
  overflow-y: scroll;
}
.left {
  width: 500px;
  margin-right: 20px;
}
.right {
  flex: 1;
}
.title {
  margin: 10px 0;
  color: #000;
  font-weight: 600;
}
video {
  background-color: black;
}
</style>